<template>
  <div class="catch-result-dialog-content">
    <div class="head">
      <my-order-result></my-order-result>
      <Musicbg></Musicbg>
    </div>

    <div class="detail">
      <div class="floor-one">
        <img :src="hengfuimg" class="hengfuimg">
        <img :src="yanhuaimg" alt="" class="yanhuaimg1">
        <img :src="yanhuaimg" alt="" class="yanhuaimg2">
        <div class="fangtu">
          <span v-for="(item,i) in animalNum" :key="i" :style="fangtubg">{{item}}</span>
        </div>
      </div>
      <div class="floor-2">
        <div class="paihangbang" :style="paihangbangbg">
          <p>好友排行榜</p>
          <div class="list-wrap">
            <p v-if="friends.length==0" class="no-friend">暂无好友</p>
            <ul  v-if="friends.length>0">
              <li v-for="(item,i) in friends" ref="list">
                <div class="li-1">
                  <i class="huangguan" v-if="i===0" :style="huangguanBg" ></i>
                  <!-- <img :src="huangguan" v-if="i===0"> -->
                  <span v-if="i<3">TOP</span>{{i+1}}
                </div>
                <img :src="item.head" class="li-2">
                <div class="li-3">{{item.name}}</div>
                <span class="li-4">{{item.result}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- <Friends></Friends> -->
        <div class="btns">
          <img :src="btn1img" @click="catchAgain">
          <img :src="btn2img" @click="choujiang" class="heartbeat">
        </div>
        <p class="sb"><span></span>一大波新年红包等你来哦~</p>
      </div>
    </div>
  </div>
</template>
<script>
import myOrderResult from './my-order-result.vue'
import Musicbg from './music-bg.vue'
import Utils from './../utils.js'
import { Toast } from 'mint-ui'

export default {
  name: "catchResult",
  components:{
    myOrderResult,
    Musicbg
  },
  data () {
    return {
      hengfuimg:require('./../assets/imgs/catch-result/img_02.png'),
      yanhuaimg:require('./../assets/imgs/catch-result/img_01.png'),
      fangtubg:{
        'background-image': `url(${require('./../assets/imgs/catch-result/img_03-2.png')})`
      },
      paihangbangbg:{
        'background-image': `url(${require('./../assets/imgs/catch-result/img_04.png')})`
      },
      huangguanBg:{
        'background-image': `url(${require('./../assets/imgs/catch-result/img_05.png')})`
      },
      btn1img:require('./../assets/imgs/shareout.png'),
      btn2img:require('./../assets/imgs/catch-result/img_07.png'),
      
    };
  },
  computed:{
    animals(){
      return this.$store.state.animals
    },
    friends(){
      return this.$store.state.friends
    },
    animalNum(){
      return  String(this.animals).split('')
    },
    ulStyle(){
      let vm = this
      return {
        //'width':vm.$refs.list[0].style.width *vm.friends.length
      }  
    }
  },
  mounted(){
    console.log(this.$refs.list[0])
  },
  methods:{
    catchAgain(){
      // this.$emit('close')
      // this.$router.push({path:'/'})
      this.$emit('share')
    },
    choujiang(){
      if( this.animals <15 ){
        Toast('抓到15只才能抽奖哦')
        //this.$store.commit('toast','加油加油，抓到15只就能抽奖哦')
      }else{
        this.$emit('openOther','Lotto')
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common.scss';
.catch-result-dialog-content{
  position: relative;
  .head{
    position: relative;
    width: 100%;
    padding: px2rem(20);
    box-sizing: border-box;
    .music{
      position: absolute;
      right:px2rem(10);
      top:px2rem(30);
    }
  }
  .detail{
    padding: px2rem(20);
    text-align: center;
    .floor-one{
      width: 100%;
      position: relative;
      img.hengfuimg{
        width:80%;
        z-index: 2;
        position: relative;
      }
      img.yanhuaimg1{
        position: absolute;
        top:px2rem(-80);
        right:px2rem(10);
        transform: scale(.6);
        z-index: 3;
      }
      .yanhuaimg2{
        position: absolute;
        top:px2rem(120);
        left:px2rem(20);
        transform: scale(.4);
        z-index: 3;
      }
      .fangtu{
        height: 100px;
        //background-color: red;
        width:100%;
        position: absolute;
        top:px2rem(100);
        span{
          display: inline-block;
          width: px2rem(260);
          height: px2rem(260);
          line-height: px2rem(260);
          @include bg-img();
          margin-left: px2rem(-80);
          color: $color-1;
          @include font-dpr(118px);
          &:first-of-type{
            margin-left: px2rem(0);
          }
        }
      }
    }
    .floor-2{
      padding-top: px2rem(250);
      text-align: center;
      .paihangbang{
        // height: px2rem(264);
        width:px2rem(530);
        margin: 0 auto;
        @include bg-img();
        box-sizing: border-box;
        padding: px2rem(20) px2rem(30);
        color: $color-1;
        p{
          margin: 0;
          letter-spacing: 2px;
          text-align: left;
          @include font-dpr(28px);
          padding-bottom: px2rem(8);
          border-bottom: 1px solid $color-1;
        }
        .list-wrap{
          overflow-x: scroll;
          overflow-y: hidden;
          //height: px2rem(200);
          width: 100%;
          white-space:nowrap;
          text-align: left;
          //filter: blur(0px);
          //box-shadow: px2rem(2) px2rem(0) px2rem(0) red;
          .no-friend{
            border: none;
            color: #999;
            text-align: center;
            padding-top: px2rem(80);
          }
        }
        ul{
          text-align: left;
          list-style: none;
          margin: 0;
          padding: 0;
          margin-top: px2rem(10);
          //height: px2rem(200);
          max-width: 800%;
          // white-space:nowrap;  
          // display: inline-block;
          li{
            text-align: center;
            display: inline-block;
            white-space:nowrap;  
            margin-left: px2rem(38);
            &:first-child{
              margin-left: 0;
            }
            .li-1{
              vertical-align: top;
              font-size:px2rem(24);
              font-weight: bold;
              // @include font-dpr(22px);
              i{
                vertical-align: top;
                display: inline-block;
                @include bg-img();
                width: px2rem(28);
                height: px2rem(24);
              }
              
            }
            .li-2{
              width:px2rem(80);
              height: px2rem(80);
              // background-color: red;
              border-radius: px2rem(8);
            }
            .li-3{
              font-size: px2rem(18);
              //@include font-dpr(18px);
              margin-top: px2rem(0);
              margin-bottom: px2rem(8);
              letter-spacing: 2px;
              color: #8a5045;
              width:px2rem(80);
              @extend .only-one-line;
            }
            .li-4{
              font-size: px2rem(28);
              //@include font-dpr(32px);
              padding: px2rem(2) px2rem(20);
              border-radius: px2rem(32);
              background-color: $color-1;
              color: #fff;
              margin-bottom: px2rem(2);
            }
          }
        }
      }
      .btns{
        padding-top: px2rem(32);
        img{
          height: px2rem(70);
          &:first-child{
            margin-right: px2rem(10);
          }
          &:last-child{
            margin-left: px2rem(10);
          }
        }
      }
      p.sb{
        color:#bfb0af;
        font-size: px2rem(26);
        span{
          display: inline-block;
          width: px2rem(26);
          height: px2rem(26);
          @include bg-img();
          background-image: url('./../assets/imgs/i.png');
          vertical-align: middle;
          margin-right: px2rem(10);
        }
      }
    }
  }

}
</style>